<template>
	<view>
		<view class="page-body" v-if="id!=0">
			<view class="page-section page-section-gap" style="text-align: center;" @click="jump('/pages/music/comment?id='+id)">
				<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name"
					:author="current.author" :action="audioAction" controls></audio>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "play",
		props: ['id'],
		data() {
			return {
				current: {
					poster: '',
					name: '',
					author: '',
					src: '',
				},
				audioAction: {
					method: 'pause'
				},
				show: false
			}
		},
		watch: {
			id:{
				handler(newName, oldName) {
					console.log(newName)
					uni.request({
						url: "https://www.codeman.ink/api/song/detail",
						data: {
							ids: newName
						},
						method: "GET",
						success: (res) => {
							console.log(res.data);
							res.data.songs.forEach((item, index) => {
								this.current.poster = item.al.picUrl;
								if(item.alia != ''){
									this.current.name = item.name + "(" + item.alia + ")";
								}else{
									this.current.name = item.name;
								}
								this.current.author='';
								item.ar.forEach((value, num) => {
									if (num + 1 != item.ar.length) {
										this.current.author += value.name + '/';
									} else {
										this.current.author += value.name;
									}
								})
							})
						}
					})
					uni.request({
						url: "https://www.codeman.ink/api/song/url",
						data: {
							id: newName
						},
						method: "GET",
						success: (res) => {
							res.data.data.forEach((item,index)=>{
								this.current.src = item.url;
							})
						}
					})
					console.log(this.current);
				},
				immediate: true 
			}
		}
	}
</script>

<style>
</style>
